<template>
	<Picker :data="emojiIndex" class="test-picker" />
	<ComIndex ref="commonIndexRef" :isInit="false" :isSearch="false">
		<template #search>
			<ComSearchGroup @handleAdd="leftRef.handleAdd()" />
		</template>
		<template #content>
			<div class="padding">
				<Left ref="leftRef" v-bind="$attrs" />
				<Right ref="rightRef"></Right>
			</div>
		</template>
	</ComIndex>
</template>
<script lang="ts" setup>
import ComIndex from '@/components/ComIndex/Index.vue';
import ComSearchGroup from '@/components/ComSearchGroup.vue';
import Left from './components/Left.vue';
import Right from './components/Right.vue';
import data from 'emoji-mart-vue-fast/data/all.json';
import 'emoji-mart-vue-fast/css/emoji-mart.css';
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
import { useWebsocketStore } from '@/stores/modules/websocket';
import { useBarAction } from '@/hooks/useBarComps';

const emojiIndex = new EmojiIndex(data);
const leftRef = ref(null);

// Notification 浏览器消息提示
const handleNotification = ({ content, sendName }) => {
	const isImg = content?.includes('<img');
	const imgContent = isImg ? content?.replace(/<img.*?>/g, '[图片]').replace(/<[^>]*>/g, ' ') : content?.replace(/<[^>]*>/g, ' ');
	const body = `${sendName}: ${imgContent}`;
	useWebsocketStore().sendNotification(body);
};

useBarAction('RightAdd', () => {
	leftRef.value.handleAdd();
});

provide('handleNotification', handleNotification);
</script>
<style lang="scss" scoped>
.test-picker {
	position: absolute;
	opacity: 0;
	z-index: -100;
}

:deep(.padding) {
	display: flex;
	padding: 0;
	height: 100%;

	& > .arco-skeleton {
		width: 380px;
	}

	& > .right {
		flex: 1;
		padding: 0 !important;
	}
}
</style>
